<template>
  <el-dialog
    title="新建图表"
    :close-on-click-modal="false"
    :modal-append-to-body="true"
    :visible.sync="visible"
    @close="handleClose"
    :show="show"
    style="text-align:left; overflow:auto;"
    width="750px"
  >
    <div class="diaBody">
      <p class="subTitle">
        创建一个适合自己的图表
      </p>
      <div class="diaSec2">
        <p class="title1">
          你正在创建
          {{ chartsConData.chartName }} 类型的图表，他支持下列图表展示：
        </p>
        <el-radio-group v-model="tjMethods">
          <el-radio
            v-for="item in tjNewWays"
            :key="item.id"
            :disabled="item.disabled"
            :label="item.id"
            >{{ item.lable }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取消</el-button>
      <el-button size="mini" type="primary" @click="editData"
        >编辑数据</el-button
      >
      <el-button
        size="mini"
        :disabled="disabled"
        type="primary"
        @click="confirm"
        >默认数据</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { chartEncaps } from '@/components/chartsType/chartEncaps/chartEncaps.js'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations } = createNamespacedHelpers('charts')

export default {
  name: 'newChartsDialog',
  inheritAttrs: false,
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      th: {},
      disabled: false,
      visible: this.show,
      tjMethods: '',
      tjOldMethods: '',
      tjOldWays: [
        { id: '1', lable: '媒体来源' },
        { id: '2', lable: '发布时间' },
        { id: '3', lable: '站点发布量' },
        { id: '4', lable: '舆情地图' },
        { id: '5', lable: '情感' },
        { id: '6', lable: '关键词' }
      ],
      tjNewWays: []
    }
  },
  methods: {
    // 点击编辑数据
    editData() {
      this.disabled = true
      this.$emit('update:show', false)
      this.setChartsConData({ ways: this.tjMethods })
      this.setResettdata(true)
      this.$emit('editData')
    },
    // 点击取消
    handleClose() {
      // this.setLoading(false)
      // this.setshadeDisplay(true)
      this.$emit('update:show', false)
    },
    // 点击确定
    confirm() {
      // this.setChartsConData({type1:})
      this.disabled = true
      this.$emit('update:show', false)
      this.setChartsConData({ ways: this.tjMethods })
      this.setTitle()
      this.$emit('dealData', this.tjMethods)
    },
    // 设置当setDisabled前图表类型支持哪些统计方式
    setDisabled(arry1, arry2, id) {
      let d = this.tjOldWays.find(item => item.id === id)
      let f = chartEncaps.ifDraw({ _t: this, ways: id })
      if (f) {
        d.disabled = false
        arry1.push(d)
      } else {
        d.disabled = true
        arry2.push(d)
      }
    },
    ...mapMutations([
      'setEditDataShow',
      'setChartsConData',
      'setResettdata',
      'setDrawFlag',
      'setChartsData1',
      'setLoading',
      'setshadeDisplay',
      'setTitle'
    ])
  },
  mounted() {
    this.th = this
  },
  computed: {
    ...mapState(['chartsConData'])
  },
  watch: {
    // 监听弹窗的显示和隐藏
    show(val) {
      this.visible = val
      if (val) {
        this.disabled = false
        if (this.$attrs.oldType !== this.chartsConData.type1) {
          this.$attrs.mychartsDom.innerHTML = ''
        }
        let arry1 = []
        let arry2 = []
        this.tjOldWays.forEach(item => {
          this.setDisabled(arry1, arry2, item.id)
        })
        this.tjNewWays = arry1.concat(arry2)
        this.tjMethods = this.tjNewWays[0].id
        this.tjOldMethods = this.chartsConData.ways
      }
    }
  }
}
</script>
<style>
.diaBody .el-radio__label {
  font-size: 16px;
}
.diaBody .el-radio-group {
  padding: 20px;
}
</style>
<style scoped>
.diaBody {
  position: relative;
}
.subTitle {
  position: absolute;
  top: -96px;
  left: 80px;
  font-size: 14px;
  color: #aaa;
}
.title1 {
  font-size: 16px;
}
</style>
